<template>
  <div class="usesale">
    <div class="left">
      <v-chart :option="getOption()" autoresize></v-chart>
    </div>
    <div class="right">
      <div class="line">
        <div class="text">经营收益</div>
        <div class="money"><i>47911</i>万元</div>
      </div>
      <div class="line">
        <div class="text">当前应收</div>
        <div class="money"><i>7985</i>万元</div>
      </div>
      <div class="line">
        <div class="text">当前已收</div>
        <div class="money"><i>7538</i>万元</div>
      </div>
    </div>
  </div>
</template>

<script setup>
import {ref} from 'vue'
import * as echarts from 'echarts'
const dataList = ref({
  totalCount: 120, // 总资产数
  idleCount: 56, // 闲置资产数
  get percentValue() {
    return ((this.idleCount / this.totalCount) * 100).toFixed(1)
  },
})
const getOption = () => {
  return {
    series: [
      {
        type: 'gauge',
        radius: '70%', // 可调整该属性修改圆环大小
        center: ['50%', '50%'],
        progress: {
          show: true,
          width: 18,
          roundCap: true,
          itemStyle: {
            opacity: 1,
            color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
              {
                offset: 0,
                color: 'rgba(100,200,228,1)',
              },
              {
                offset: 0.5,
                color: 'rgba(48,62,245,1)',
              },
              {
                offset: 1,
                color: 'rgba(48,62,245,1)',
              },
            ]),
          },
        },
        axisLine: {
          lineStyle: {
            width: 18,
            color: [
              [
                1,
                {
                  type: 'linear',
                  x: 0.5,
                  y: 0.5,
                  r: 0.5,
                  colorStops: [
                    {
                      offset: 0,
                      color: '#F5F5F5', // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: '#DADADC', // 100% 处的颜色
                    },
                  ],
                  globalCoord: false, // 缺省为 false
                },
              ],
            ],
          },
        },
        pointer: {
          width: 0,
        },
        axisTick: {
          show: true,
          distance: -25, // 刻度线与圆心的距离，负值可以让刻度在外圈
          length: 8, // 刻度线的长度
          lineStyle: {
            color: '#376eed98', // 刻度线颜色
            width: 2,
          },
        },
        splitLine: {
          distance: -30, // 分隔线位置（比刻度线再外一点）
          length: 15,
          lineStyle: {
            color: '#376eed98', // 分隔线颜色
            width: 3,
          },
        },
        axisLabel: {
          show: false,
        },
        title: {
          offsetCenter: [0, '-15%'],
          fontSize: 18,
          color: '#fff',
        },
        detail: {
          fontSize: 30,
          fontFamily: 'DIN Alternate',
          offsetCenter: [0, '25%'],
          valueAnimation: true,
          formatter: function (value) {
            // return Math.round(value * 1000);
            return value + '%'
          },

          color: '#fff',
        },
        data: [
          {
            value: dataList.value.percentValue,
            name: `已收取租金 (${dataList.value.idleCount}万)`,
          },
        ],
      },
    ],
  }
}
</script>

<style lang="scss" scoped>
.usesale {
  margin-top: 5px;
  height: 90%;
  background-color: rgba(37, 62, 112, 0.5);
  border-radius: 10px;
  padding: 10px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  display: flex;
  .left {
    flex: 1;
    height: 100%;
    width: 100%;
  }
  .right {
    padding: 50px 0;
    flex: 1;
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    .line {
      height: 100%;
      width: 100%;
      display: flex;
      justify-content: space-around;
      align-items: center;
      height: 25%;
      border-bottom: 1px solid #d6e5f7;
      border-top: 1px solid #d6e5f7;
      .text {
        color: #d6e5f7;
        font-size: 18px;
      }
      .money {
          font-size: 16px;
          color: #d6e5f7;
          i {
            font-size: 20px;
            margin: 0 10px;
            color: rgb(62, 138, 244);
          }
        }
    }
  }
}
</style>
